<template>
  <div :class="{'mobile' : showMobilePage}" class="data-display-row-list">
    <template v-for="(item, index) in dataList" >
      <div
        v-if="item.auth === undefined || item.auth"
        :key="index"
        :class="[
          { 'mb4': ![0,1,2,3].includes(index), 'width100': dataList.length === 1, 'warning': item.isWarning, 'data-item-mobile': showMobilePage },
          item.extendClass?item.extendClass:''
        ]"
        :style="{width: item.width || ''}"
        class="data-item">
        <div class="flex flex-center">
          <img
            v-if="item.icon"
            :src="item.icon"
            :style="{ width: (item.iconSize || 14) + 'px', height: (item.iconSize || 14) + 'px' }"
            alt="icon">
          <div class="label">
            <el-tooltip v-if="item.tooltip" placement="top">
              <div slot="content">{{ item.tooltip }}</div>
              <div>{{ item.label }}</div>
            </el-tooltip>
            <span v-else>{{ item.label }}</span>
            <span>{{ item.label.indexOf('：') >= 0?'':'：' }}</span>
          </div>
          <el-tooltip v-if="item.data || item.data === 0" :open-delay="800" placement="top">
            <div slot="content">
              <span>{{ getContentVal(item) }}</span>
              <!--
              <span v-if="item.placeholder">{{ item.placeholder }}</span>
              <span v-else>{{ item.unit ? item.data : moneyFilter(item.data) }}</span>
              <span v-if="item.unit">{{ item.unit }}</span>
              -->
              <el-button
                v-if="showCopyBtn"
                type="text"
                size="small"
                style="padding: 0"
                @click="tooltipContentCopy(item)"
              >复制</el-button>
            </div>
            <div :class="{'pointer': showPointer}" class="num" @click="handleNumClick(index, item)">{{ item.unit ? item.data : bigNumber(item.data, item.isMoney) }}<span v-if="item.unit">{{ item.unit }}</span></div>
          </el-tooltip>
          <div v-else class="num">--</div>
        </div>
        <el-alert
          v-if="item.isWarning"
          title="小提示：请注意成本已经大于含税金额"
          type="warning"
          show-icon/>
      </div>
    </template>
  </div>
</template>

<script>
import { moneyFilter } from '@/filters/number';
import { isEmpty } from '@/utils/tools';
import { mapState } from 'vuex';

export default {
  props: {
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      type: String,
      default: ''
    },
    pageItem: {
      type: Number,
      default: 4
    },
    projectChild: {
      type: Boolean,
      default: false
    },
    spanNum: {
      type: Number,
      default: 3
    },
    showPointer: {
      type: Boolean,
      default: false
    },
    showCopyBtn: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    moneyFilter,
    bigNumber: (num, isMoney = true) => {
      let formatNum = Math.abs(num);
      const sign = Math.sign(num);
      // 参数为正数，返回+1；
      // 参数为负数，返回-1；
      // 参数为 0，返回0；
      // 参数为-0，返回-0;
      // 其他值，返回NaN。
      if (formatNum) {
        if (formatNum >= 1000000000000) {
          formatNum = (formatNum / 1000000000000).toFixed(2) + '万亿';
        } else if (formatNum >= 100000000) {
          formatNum = (formatNum / 100000000).toFixed(2) + '亿';
        } else if (formatNum >= 10000) {
          formatNum = (formatNum / 10000).toFixed(2) + '万';
        }
        formatNum = isMoney ? `${formatNum}元` : formatNum;
        return sign === -1 ? `-${formatNum}` : formatNum;
      } else {
        return num;
      }
    },
    totalPage(dataList) {
      const list = JSON.parse(JSON.stringify(dataList));
      const ans = [];
      while (list.length > 0) {
        ans.push({
          list: list.splice(0, this.pageItem)
        });
      }
      return ans;
    },
    handelItemClick(item) {
      this.$emit('handelItemClick', item);
    },
    handleNumClick(index, item) {
      this.$emit('handleNumClick', index, item);
    },
    getContentVal(data) {
      const val = data.placeholder || (data.unit ? data.data : moneyFilter(data.data));
      return val + (data.unit || '');
    },
    tooltipContentCopy(data) {
      let copyVal = this.getContentVal(data);
      if (isEmpty(copyVal)) return;
      // 数值每3位带','的复制内容移除','
      if (!data.placeholder) {
        copyVal = copyVal.replace(/,/g, '');
      }
      this.$copyText(copyVal).then(() => {
        this.$message.success('复制成功');
      }, e => {
        console.error(e);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.maxWidth {
  max-width: 300px;
}
.data-display-carousel {
  &::v-deep {
    .el-carousel__indicators {
      .el-carousel__button {
        background-color: #E2E7F8;
        width: 16px;
        height: 4px;
        opacity: 1 !important;
        border-radius: 6px;
      }
      .is-active {
        .el-carousel__button {
          width: 40px;
          background-color: #406EFF;
        }
      }
    }
  }
}
.data-display-one {
  &::v-deep {
    .el-carousel__indicators {
      display: none;
    }
  }
}
// .data-display-list {
//   height: 76px;
// }
.project-item{
  &::v-deep {
    .el-col{
      width: 20% !important;
    }
  }
}
.col-center {
  display: flex;
  align-items: center;
}
.data-display-item {
  background: #FAFAFC;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex:1;
  height: 76px;
  .icon-info:hover{
    color: #406EFF;
  }
  &:last-child {
    margin-right:0;
  }
  .pointer {
    cursor: pointer;
  }
  .data {
    font-size: 24px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 1.2;
    color: #5F77C3;
  }
  .label {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: #999999;
    margin-top: 2px;
    display: flex;
    align-items: center;
  }
}
.oneCell {
  .data {
    font-size: 24px;
    font-family: DIN Alternate;
    font-weight: bold;
    line-height: 1.2;
    color: #5F77C3;
  }
  .label {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: #999999;
    margin-top: 5px;
  }
}
.mobile {
  flex-wrap: nowrap !important;
  @include scrollBar($x: auto, $y: auto, $width: 2px);
}
.data-display-row-list {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #FAFAFC;
  padding: 10px 8px;
  .flex {
    width: 100%;
  }
  .data-item {
    box-sizing: border-box;
    width: 24%;
    border-right: 1px solid #DDE1EA;
    margin-right: 10px;
    position: relative;
    &::v-deep {
      .el-alert {
        position: absolute;
        top: -48px;
        left: -10px;
        white-space: nowrap;
        width: fit-content;
      }
    }
    &:nth-of-type(4n) {
      border-right: none;
    }
    &.mb4{
      padding-top: 4px;
    }
    &.warning {
      &::v-deep {
        .el-alert__title {
          color: #333;
          margin-right: 8px;
        }
        .num {
          color: red;
        }
      }
    }
    img {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
    .label {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #999;
      flex-shrink: 0;
      .tip {
        margin: 0 0 0 2px;
      }
    }
    .num {
      font-size: 16px;
      font-weight: bold;
      color: #5F77C3;
      line-height: 22px;
      flex-shrink: 0;
    }
  }
  .data-item-mobile {
    flex: 1;
    min-width: fit-content;
    padding-right: 12px;
  }
  .width100 {
    width: 100%;
    border-right: none !important;
  }
  .data-item:last-child {
    border-right: none !important;
    margin-right: 0;
  }
  /* .data-display-row-item {
    display: flex;
    flex:1;
    align-items: center;
    .label {
      font-size: 14px;
      color: #999999;
    }
    .num {
      font-size: 16px;
      font-family: DIN Alternate;
      font-weight: bold;
      color: #5F77C3;
    }
    img {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
  } */
}
</style>
